<template>
  <a-layout-sider :style="{ 'z-index': isheade ? '2' : '1' }" style="background: #fff;overflow:hidden" :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]" width="220px" :collapsible="collapsible" v-model="collapsed" :trigger="null">

    <s-menu :isheade="isheade" :collapsed="collapsed" :menu="menus" :theme="theme" :mode="mode" @select="onSelect" style="padding: 16px 0px;"></s-menu>
    <div class="">
      <span class="pulldown-handle" @click="toggleSidder">
        <a-icon :type="sideStatus ? 'caret-left' : 'caret-right'"></a-icon>
        <a>{{ sideStatus ? '收起' : '展开' }}</a>
      </span>
    </div>
  </a-layout-sider>
</template>

<script>
import SMenu from './index'
import { mixin, mixinDevice } from '@/utils/mixin'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'SideMenu',
  components: { SMenu },
  mixins: [mixin, mixinDevice],
  props: {
    isheade: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapGetters(['sideStatus'])
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    toggleSidder () {
      this.$emit('toggleSidder')
    }
  }
}
</script>

<style lang="less" scoped>
.pulldown-handle-small {
  position: absolute;
  top: 8px;
  right: 20px;
  height: 48px;
  transition: transform 0.3s ease-out;
  transform: translateX(0);
}
.pulldown-handle {
  display: flex;
  width: 10px;
  height: 30px;
  border: 1px solid 4px;
  border-radius: 4px 0 0 4px;
  border-bottom: none;
  text-align: center;
  line-height: 10px;
  transition: all 0.2s;
  position: absolute;
  top: 24px;
  // left: 0;
  right: 0;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0px 8px 18px -3px #9e9e9e;
  z-index: 2;
  overflow: hidden;
  cursor: pointer;
  span {
    transform: scale(0.7);
    display: flex;
    justify-content: center;
  }
  i {
    align-self: center;
  }
  a {
    align-self: center;
  }
  &:hover {
    width: 45px;
    height: 60px;
    color: @primary-color;
  }
}
</style>
